<script setup>
import router from "@/router";
import { useUserStore } from "@/stores/user";
import { ElMessage } from "element-plus";
import { ref } from "vue";
// 登录数据
const loginForm = ref({
  userAccount: "",
  password: "",
});
// 状态管理
const userStore = useUserStore();
// 表单实例
const loginFormRef = ref(null);
// 登录校验

// 密码校验

const passwordValid = (rule, value, callback) => {
  if (!value.match(/^[a-zA-Z0-9.@]+$/)) {
    callback(new Error("密码不能包含除'@之外的特殊字符"));
  }
  callback();
};
const rules = ref({
  userAccount: [
    { required: true, message: "请输入登录账号", trigger: "blur" },
    { min: 4, max: 10, message: "账号长度在4~10之间" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 5, max: 20, message: "账号长度在5~20之间" },
    { validator: passwordValid, trigger: "blur" },
  ],
});

// 处理登录
const handleLogin = () => {
  loginFormRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.warning("请填写正确的信息");
      return;
    }
    try {
      await userStore.loginAction(loginForm.value);
      ElMessage.success("登录成功");
      router.push("/layout");
    } catch (e) {
      ElMessage.error(e.message);
    }
  });
};
</script>
    
<template>
  <div class="container">
    <div class="center">
      <div class="title">
        <div class="left_logo">
          <img src="../assets/image/logo.png" alt="" />
        </div>
        <div class="right_dsc">
          <h3>在线编程测评系统</h3>
        </div>
      </div>
      <div class="login_form">
        <el-form
          :model="loginForm"
          ref="loginFormRef"
          :rules="rules"
          @keypress.enter.prevent="handleLogin"
        >
          <el-form-item size="large" prop="userAccount">
            <el-input
              placeholder="请输入账号"
              v-model.trim="loginForm.userAccount"
              prefix-icon="User"
            ></el-input>
          </el-form-item>
          <el-form-item size="large" prop="password">
            <el-input
              placeholder="请输入密码"
              type="password"
              v-model.trim="loginForm.password"
              show-password
              prefix-icon="Lock"
            >
            </el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" style="width: 100%" @click="handleLogin"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="footer_tip">b端未开通注册功能,请联系管理员添加账号</div>
    </div>
  </div>
</template>
    
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.center {
  width: 30%;
  height: 70%;
  background: #ffffff;
  border-radius: 21px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 10px 22px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(229, 229, 229, 1);
  display: flex;
  flex-direction: column;
}
.title {
  display: flex;
  margin: 50px 40px;
  width: 100%;
  align-items: center;
  .left_logo img {
    width: 70px;
    height: 70px;
  }

  .right_dsc {
    margin-left: 20px;
  }
}
.login_form {
  .el-form {
    margin: 20px 40px;
    margin-top: 0;
  }
}

.footer_tip {
  margin: 20px 40px;
  font-size: 12px;
  color: rgba(60, 60, 67, 0.6);
}
</style>